<div>
	<!-- widget content -->
	<div class="widget-body">

		<form action="" method="post" id="checkout-form" class="smart-form">
			<header>
				<h2>
					增加策略
					<button class="close" data-dismiss="modal">x</button>
				</h2>
			</header>
			<fieldset style="padding: 25px 14px 5px 20%;">
				<div id="dialog-alert"></div>
				<div id="crontabLabel"></div>
				<div class="row">
					<label class="label col col-2">备份类型</label>
					<section class="col col-6">
						<label class="select"> <select class="required " id="type"
							name="type">
								<option value="">请选择备份类型</option>
						</select>
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-2">保留天数</label>
					<section class="col col-6">
						<label class="select"> <select class="required "
							id="retention" name="retention">
								<option value="">请选择保留天数</option>
						</select>
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-2">备份周期</label>
					<section class="col col-6">
						<label class="select"> <select class="required "
							id="retention_type" name="retention_type">
						</select>
						</label>
					</section>
				</div>
				<div class="row" id="sel_day">
					<label class="label col col-2">日期</label>
					<section class="col col-6">
						<label class="select"> <select class="required " id="dom"
							name="dom">
						</select>
						</label>
					</section>
				</div>
				<div class="row" style="display: none;">
					<label class="label col col-2">月</label>
					<section class="col col-6">
						<label class="select"> <select class="required "
							id="month" name="month">
						</select>
						</label>
					</section>
				</div>
				<div class="row" id="sel_week">
					<label class="label col col-2">周</label>
					<section class="col col-6">
						<label class="select"> <select class="required " id="dow"
							name="dow">
						</select>
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-2">时</label>
					<section class="col col-2">
						<label class="select"> <select class="required " id="hour"
							name="hour">
						</select>
						</label>
					</section>
					<label class="label col col-2">分</label>
					<section class="col col-2">
						<label class="select"> <select class="required "
							id="minute" name="minute">
						</select>
						</label>
					</section>
				</div>
			</fieldset>
		</form>
	</div>
	<!-- end widget content -->

</div>
<div class="modal-footer">

	<button type="button" class="btn btn-default btn-sm"
		data-dismiss="modal">取消</button>
	<button type="submit" class="btn btn-primary btn-sm" id="submitbtn">
		保存</button>
</div>
<script>
	pageSetUp();

	$("#sel_day").hide();
	$("#sel_week").hide();

	var type, $type;
	var retention, $retention;
	var retention_type, $retention_type;
	var minute, $minute;
	var hour, $hour;
	var dom, $dom;
	var month, $month;
	var dow, $dow;

	var pagefunction = function() {
		$type = $("#type").selectize({
			valueField : 'id',
			labelField : 'text',
			searchField : 'text',
			create : false,
			sortField : {
				field : 'id'
			},
			options : []
		});

		sendGet("/upm_manager/v1.0/selections/backup_types", fillForm,
				DialogAlert, null);

		$retention_type = $("#retention_type").selectize({
			valueField : 'id',
			labelField : 'text',
			searchField : 'text',
			create : false,
			sortField : {
				field : 'id'
			},
			options : [ {
				id : "1",
				text : "按天"
			}, {
				id : "2",
				text : "按周"
			}, {
				id : "3",
				text : "按月"
			} ]
		});
		retention_type = $retention_type[0].selectize;
		retention_type.setValue("1");

		$retention = $("#retention").selectize({
			valueField : 'id',
			labelField : 'text',
			searchField : 'text',
			create : false,
			sortField : {
				field : 'id'
			},
			options : []
		});
		retention = $retention[0].selectize;
		retention.clearOptions();
		for (var i = 1; i <= 30; i++) {
			retention.addOption({
				id : i,
				text : i.toString()
			});
		}
		retention.setValue("7");

		$minute = $("#minute").selectize({
			valueField : 'id',
			labelField : 'text',
			searchField : 'text',
			create : false,
			sortField : {
				field : 'id'
			},
			options : []
		});
		minute = $minute[0].selectize;
		minute.clearOptions();
		for (var i = 0; i < 60; i++) {
			minute.addOption({
				id : i,
				text : i.toString()
			});
		}
		minute.setValue("0");

		$hour = $("#hour").selectize({
			valueField : 'id',
			labelField : 'text',
			searchField : 'text',
			create : false,
			sortField : {
				field : 'id'
			},
			options : []
		});
		hour = $hour[0].selectize;
		hour.clearOptions();
		for (var i = 0; i < 24; i++) {
			hour.addOption({
				id : i,
				text : i.toString()
			});
		}
		hour.setValue("0");

		$dom = $("#dom").selectize({
			valueField : 'id',
			labelField : 'text',
			searchField : 'text',
			create : false,
			sortField : {
				field : 'id'
			},
			options : []
		});
		dom = $dom[0].selectize;
		dom.clearOptions();
		dom.addOption({
			id : "*",
			text : "*"
		});
		for (var i = 1; i <= 31; i++) {
			dom.addOption({
				id : i,
				text : i.toString()
			});
		}
		dom.setValue("*");

		$month = $("#month").selectize({
			valueField : 'id',
			labelField : 'text',
			searchField : 'text',
			create : false,
			sortField : {
				field : 'id'
			},
			options : []
		});
		month = $month[0].selectize;
		month.clearOptions();
		month.addOption({
			id : "*",
			text : "*"
		});
		for (var i = 1; i <= 12; i++) {
			month.addOption({
				id : i,
				text : i.toString()
			});
		}
		month.setValue("*");

		$dow = $("#dow").selectize({
			valueField : 'id',
			labelField : 'text',
			searchField : 'text',
			create : false,
			sortField : {
				field : 'id'
			},
			options : []
		});
		dow = $dow[0].selectize;
		dow.clearOptions();
		dow.addOption({
			id : "*",
			text : "*"
		});
		for (var i = 1; i <= 7; i++) {
			dow.addOption({
				id : i,
				text : i.toString()
			});
		}
		dow.setValue("*");

		var errorClass = 'invalid';
		var errorElement = 'em';
		var option = {
			errorClass : errorClass,
			errorElement : errorElement,
			highlight : function(element) {
				$(element).parent().removeClass('state-success').addClass(
						"state-error");
				$(element).removeClass('valid');
			},
			unhighlight : function(element) {
				$(element).parent().removeClass("state-error").addClass(
						'state-success');
				$(element).addClass('valid');
			},
			// Rules for form validation
			// Messages for form validation
			messages : {
				type : {
					required : '请选择备份类型'
				},
				retention : {
					required : '请选择保留天数'
				}
			},
			errorPlacement : function(error, element) {
				if ($(element).next("div").hasClass("tooltip")) {
					$(element).attr("data-original-title", $(error).text())
							.tooltip("show");
				} else {
					$(element).attr("title", $(error).text()).tooltip("show");
				}
			},
			submitHandler : function(form) {
				//在这里生成需要提交的json数据
				var data = $('#checkout-form').serializeArray();
				var jsonData = {
					type : data[0].value,
					retention : parseInt(data[1].value),
					cronExpression : $("#minute").val() + ' '
							+ $("#hour").val() + ' ' + $("#dom").val() + ' '
							+ $("#month").val() + ' ' + $("#dow").val()
				};
				//在这里调用ajax方法提交
				sendPost("/upm_manager/v1.0/servs/"
						+ getSession("serviceUpsqlId") + "/backup_strategys",
						postSuccess, DialogAlert, JSON.stringify(jsonData),
						null);
			}
		};
		$('#checkout-form').validate(option);
	};
	loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);

	$('#submitbtn').click(function() {
		DialogAlertClear();
		$('#checkout-form').submit();
	});
	function postSuccess(data) {
		//提交成功的方法
		$("#s4remoteModal").modal('toggle');
		sendGet("/upm_manager/v1.0//v1.0/servs/" + getSession("serviceUpsqlId")
				+ '/backup_strategys', reloadBackupStrategyGrid, ListAlert,
				null);
	}

	function fillForm(data) {
		type = $type[0].selectize;
		type.clearOptions();
		$.each(data, function(k, v) {
			type.addOption(v);
			type.setValue(v.id);
		});
	}

	$("#dom").change(function() {
		if ($(this).val() != "*") {
			dow.setValue("*");
		}
	});

	$("#dow").change(function() {
		if ($(this).val() != "*") {
			dom.setValue("*");
		}
	});

	$("#retention_type").change(function() {
		if ($(this).val() == "1") {
			$("#sel_day").hide();
			$("#sel_week").hide();
		} else if ($(this).val() == "2") {
			$("#sel_day").hide();
			$("#sel_week").show();
		} else if ($(this).val() == "3") {
			$("#sel_day").show();
			$("#sel_week").hide();
		}
	});
</script>